import { useState, useEffect, useContext } from 'react'
import style from './index.module.less'
import icon1 from '@imgs/input-icon2.png'
import icon2 from '@imgs/input-icon3.png'
import { PlusOutlined } from '@ant-design/icons'
import { CaseSchema, PartySchema, AgentSchema, OtherPersonSchema } from '@components/schema/caseSchema';
import { Button } from 'antd'
import PartyModal from './components/partyModal'
import AgentModal from './components/agentModal'
import OtherModal from './components/otherModal'
import addon1 from '@imgs/add-on1.png'
import addon2 from '@imgs/add-on2.png'
import addun from '@imgs/add-un.png'
import classNames from 'classnames'
import {CaseContext} from '@src/pages/admin/pages/caseDetail/context'

interface Props {
  data: CaseSchema | { [k: string]: any }
}

function Main ({ data }: Props) {
  const [applicants, setApplicants] = useState<PartySchema[]>([])
  const [respondents, setRespondents] = useState<PartySchema[]>([])
  const [applicantAgents, setApplicantAgents] = useState<AgentSchema[]>([])
  const [respondentAgents, setRespondentAgents] = useState<AgentSchema[]>([])
  const [partyVisible, setPartyVisible] = useState(false)
  const [party, setParty] = useState<PartySchema | null>(null)
  const [partyType, setPartyType] = useState('')
  const [agent, setAgent] = useState<AgentSchema | null>(null)
  const [agentVisible, setAgentVisible] = useState(false)
  const [partyList, setPartyList] = useState<PartySchema[]>([])
  const [agentList, setAgentList] = useState<AgentSchema[]>([])
  const [otherList, setOtherList] = useState<OtherPersonSchema[]>([])
  const [other, setOther] = useState<OtherPersonSchema | null>(null)
  const [otherVisible, setOtherVisible] = useState(false)
  const [editable, setEditable] = useState(true)
  const c = useContext(CaseContext)
  useEffect(() => {
    setApplicants(data.applicants || [])
    setRespondents(data.respondents || [])
    setApplicantAgents(data.applicant_agents || [])
    setRespondentAgents(data.respondents_agents || [])
  }, [data])
  useEffect(() => {
    setOtherList(c.otherPerson)
    if (data.status === '已归档') {
      setEditable(false)
    } else {
      setEditable(c.editable)
    }
  }, [c])
  return (
    <div className={style.container}>
      <PartyModal visible={partyVisible} value={party} type={partyType} agentList={agentList} editable={editable}
        hide={() => { setPartyVisible(false); setParty(null); setPartyType(''); setAgentList([]) }}
      />
      <AgentModal visible={agentVisible} value={agent} type={partyType} partyList={partyList} agentList={agentList} editable={editable}
        hide={() => { setAgentVisible(false); setAgent(null); setPartyType('') }}
       />
      <OtherModal visible={otherVisible} value={other} editable={editable} hide={() => { setOther(null); setOtherVisible(false) }} />
      <div className={style.line}>
        <span className={style.icon}>
          <img src={icon1} />
        </span>
        <span className={style.label}>申请人</span>
        <span className={style.split}></span>
        <span className={style.other}>
          <span className={style['person-list']}>
            {applicants.map((li, i) => {
              return (
                <span key={i}>
                  <a className={classNames(style.applicant, {[style.del]: li.status === 0})} onClick={() => { setParty(li); setPartyType('申请人'); setPartyVisible(true); setAgentList(applicantAgents) }}>{li.name}</a>
                  {i < applicants.length - 1 && '、'}
                </span>
              )
            })}
            {editable && <a className={style['add-btn']} onClick={() => { setParty(null); setPartyType('申请人'); setPartyVisible(true) }}></a>}
          </span>
        </span>
      </div>

      <div className={style.line}>
        <span className={style.icon}>
          <img src={icon1} />
        </span>
        <span className={style.label}>代理人</span>
        <span className={style.split}></span>
        <span className={style.other}>
          <span className={style['person-list']}>
            {applicantAgents.map((li, i) => {
              return (
                <span key={i}>
                  <a className={style.applicant} onClick={() => { setAgent(li); setPartyType('申请人'); setPartyList(applicants); setAgentList(applicantAgents); setAgentVisible(true) }}>{li.name}</a>
                  {i < applicantAgents.length - 1 && '、'}
                </span>
              )
            })}
            {editable && <a className={style['add-btn']}onClick={() => { setAgent(null); setPartyType('申请人'); setPartyList(applicants); setAgentList(applicantAgents); setAgentVisible(true) }}></a>}
          </span>
        </span>
      </div>

      <div className={style.line}>
        <span className={style.icon}>
          <img src={icon2} />
        </span>
        <span className={style.label}>被申请人</span>
        <span className={style.split}></span>
        <span className={style.other}>
          <span className={style['person-list']}>
            {respondents.map((li, i) => {
              return (
                <span key={i}>
                  <a className={classNames(style.respondent, { [style.del]: li.status === 0 })} onClick={() => { setParty(li); setPartyType('被申请人'); setPartyVisible(true); setAgentList(respondentAgents) }}>{li.name}</a>
                  {i < respondents.length - 1 && '、'}
                </span>
              )
            })}
            {editable && <a className={classNames(style['add-btn'], style.respondent)} onClick={() => { setParty(null); setPartyType('被申请人'); setPartyVisible(true) }}></a>}
          </span>
        </span>
      </div>

      <div className={style.line}>
        <span className={style.icon}>
          <img src={icon2} />
        </span>
        <span className={style.label}>代理人</span>
        <span className={style.split}></span>
        <span className={style.other}>
          <span className={style['person-list']}>
            {respondentAgents.map((li, i) => {
              return (
                <span key={i}>
                  <a className={style.applicant} onClick={() => { setAgent(li); setPartyType('被申请人'); setPartyList(respondents); setAgentList(respondentAgents); setAgentVisible(true) }}>{li.name}</a>
                  {i < respondentAgents.length - 1 && '、'}
                </span>
              )
            })}
            {editable && <a className={style['add-btn']}onClick={() => { setAgent(null); setPartyType('被申请人'); setPartyList(respondents); setAgentList(respondentAgents); setAgentVisible(true) }}></a>}
          </span>
        </span>
      </div>

      <div className={style.line}>
        <span className={style.icon}>
          ...
        </span>
        <span className={style.label}>其他</span>
        <span className={style.split}></span>
        <span className={style.other}>
          <span className={style['person-list']}>
            {otherList.map((li, i) => {
              return (
                <span key={i}>
                  <a className={style.applicant} onClick={() => { setOther(li); setOtherVisible(true) }}>{li.name}</a>
                  {i < otherList.length - 1 && '、'}
                </span>
              )
            })}
            {editable && <a className={style['add-btn']}onClick={() => { setOther(null); setOtherVisible(true) }}></a>}
          </span>
        </span>
      </div>
    </div>
  )
}

export default Main
